<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Remdator Examples</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../../jquery-ext.js" type="text/javascript"></script>
<script src="../../remdator-exceptions.js" type="text/javascript"></script>
<script src="../../DataElement.js" type="text/javascript"></script>
<script src="../../SingleDataElement.js" type="text/javascript"></script>
<script src="../../DataStore.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
	//logging functions
	function log($message, $bold)
	{
		if ($bold)
		{
			$("#message").append("<b>"+$message + "</b><br />");
		}
		else
		{
			$("#message").append($message + "<br />");
		}
	}
	function clearlog()
	{
		$("#message").html("");
	}
	//end logging functions
	
	
	
	var $datastore = null;

	function create()
	{
		clearlog();
		
		$datastore = new $.remdator.DataStore({
			initValue : { text : "uninitialized", file : "uninitialized" },
			
			ajaxOperations : {
				"load" : {
					url : "server/load.php",
					success : function($ajaxOutputArgs) {
						log("Now inside success function of load.");
						log("Data sent to server: " + $ajaxOutputArgs.requestData["suffix"]);
						log("Data received from server: " + $ajaxOutputArgs.output["text"] + " | " + $ajaxOutputArgs.output["file"]);
						log("<br />");
						
						$ajaxOutputArgs.source.setValue({ value : {
							text : $ajaxOutputArgs.output["text"],
							file : $ajaxOutputArgs.output["file"]
						} });
					},
					settings : { type : "POST", dataType : "json" }
				},
				
				"changetext" : {
					url : "server/changetext.php",
					success : function($ajaxOutputArgs) {
						log("Now inside success function of change text.");
						log("Data sent to server: " + $ajaxOutputArgs.requestData["new_text"]);
						log("Data received from server: " + $ajaxOutputArgs.output["new_text"]);
						log("<br />");
						
						$ajaxOutputArgs.source.setValue({ value : {
							text : $ajaxOutputArgs.output["new_text"],
							file : $ajaxOutputArgs.source.getValue()["file"]
						} });
						
						//We could also use $ajaxOutputArgs.source.callAjaxOperation({ operationName : "load", requestData : null }); if the script doesn't return the new value.
					},
					settings : { type : "POST", dataType : "json" }
				}
			},
			
			formOperations : {
				"changefile" : {
					url : "server/changefile.php",
					success : function($formOutputArgs) {
						log("Now inside success function of change file.");
						log("Data sent to server: (see form)");
						log("Data received from server: " + $formOutputArgs.output["new_file"]);
						log("<br />");
					
						$formOutputArgs.source.setValue({ value : {
							text : $formOutputArgs.source.getValue()["text"],
							file : $formOutputArgs.output["new_file"]
						} });
						
						//We could also use $formOutputArgs.source.callAjaxOperation({ operationName : "load", requestData : null }); if the script doesn't return the new value.
					},
					settings : {
						form : $("form"),
						iframe : $("form iframe"),
						dataType : "json"
					}
				}
			}
		});
		
		$datastore.addChangeListener({
			listener : function($eventArgs) {
				var $source = $eventArgs.source;
				
				log("Change listener has been triggered.");
				log("Value of remdator object that fired event: " + $source.getValue()["text"] + " | " + $source.getValue()["file"]);
				log("<br />");
			}
		});
		
		log("Created data store", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function ajaxLoad()
	{
		clearlog();
		
		var $suffix = $("#suffix").val();
		
		$datastore.callAjaxOperation({ operationName : "load", requestData : { suffix : $suffix } });
		
		log("Remotely loaded value of data store.", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function ajaxLoadLast()
	{
		clearlog();
		
		$datastore.callAjaxOperation({ operationName : "load", requestData : null }); //Reuse the last request data used for the load operation.
		
		log("Remotely loaded value of data store.", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function ajaxChangeText()
	{
		clearlog();
		
		var $new_text = $("#new_text").val();
		
		$datastore.callAjaxOperation({ operationName : "changetext", requestData : { new_text : $new_text } });
		
		log("Remotely changed text of data store.", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function formChangeFile()
	{
		clearlog();
		
		$datastore.callFormOperation({ operationName : "changefile" }); //Request data is whatever is in the form.
		
		log("Remotely changed file of data store.", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	$(document).ready(function() {
		create();
	});
//-->
</script>  
</head>
<body>
	<div id="message"></div>
	<input type="button" value="Recreate data store" onclick="create();" /><br />
	<input type="button" value="Remotely load value from load.php using given suffix" onclick="ajaxLoad();" /><br />
	<input type="button" value="Remotely load value from load.php using last suffix" onclick="ajaxLoadLast();" /><br />
	<input type="button" value="Remotely change text through changetext.php using given new text and update local value" onclick="ajaxChangeText();" /><br />
	<input type="button" value="Remotely change file at changefile.php using given new file and update local value" onclick="formChangeFile();" /><br />
	Suffix: <input type="text" id="suffix" /><br />
	New Text: <input type="text" id="new_text" /><br />
	<form enctype="multipart/form-data" method="POST">
		New File: <input name="newfile" type="file" />
		<iframe name="form_iframe"></iframe>
		(iframe would be hidden using "display:none;")
	</form>
</body>
</html>